<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>服务状态</title>
    <link rel="stylesheet" href="./../../layui/css/layui.css">
    <style>
        .layui-table-tool{
            background-color: #fff !important;
        }
        .layui-table-tool-self{
            display: none;
        }
        .mr{
            height: 32px !important;
            line-height: 32px !important;
            margin-right: 15px !important;
        }
        .layui-form-checked[lay-skin="primary"] i{
            border-color: #1E9FFF !important;
            background-color: #1E9FFF !important;
        }
        .layui-table-tool-temp{
            padding-right: 0px;
        }
    </style>
</head>
<body>
    <div style="width: 100%;box-sizing: border-box;padding:0 10px">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn  layui-btn-normal mr" lay-event="getState">启动</button>
          <!-- <button class="layui-btn  layui-btn-normal mr" lay-event="getpurse">暂停</button> -->
          <button class="layui-btn  layui-btn-normal mr" lay-event="isColse">关闭</button>
          <button class="layui-btn  layui-btn-normal mr" lay-event="getrestart">重启</button>
        </div>
      </script>
</body>
<script src="./../../JS/jquery-2.0.3.js"></script>
<script src="./../../layui/layui.js"></script>
<script type="text/html" id="status">
        {{#  if(d.State === 'running'){ }}
         <button type="button" class="layui-btn layui-btn-xs  layui-btn-normal">running</button>
         {{#  } }}  
         {{#  if(d.State === 'paused'){ }}
         <button type="button" class="layui-btn layui-btn-xs layui-btn-warm">paused</button>
         {{#  } }}  
         {{#  if(d.State === 'exited'){ }}
         <button type="button" class="layui-btn layui-btn-xs  layui-btn-danger">exited</button> 
         {{#  } }}  
</script>
<script>
    var table,form,layer;
    layui.use(['table','form','layer'], function(){
        table = layui.table;
        layer = layui.layer;
      
    table.render({
        elem: '#test'
        // ,url:'./../../JSON/serviceStatus.json'
        ,url: parent.parent.defaultUrl+'/docker/select'
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,title: '服务状态表'
        ,parseData: function(res){
            console.log(res)
            for(var i=0;i<res.data.length;i++){
                res.data[i].Created = timestampToTime(res.data[i].Created)
                if(res.data[i].Names && res.data[i].Names.length !=0){
                    var len = res.data[i].Names[0].length;
                    res.data[i].Names = res.data[i].Names[0].substring(1,len)
                } 
            }
            return{
                "code": 0,
                "msg": "",
                "count": 1000,
                "data": res.data 
            }
        }
        ,cols: [[
        {type: 'radio',align: 'center',width:48,}
        ,{field:'Names', title:'名称',align: 'center',width:127,}
        ,{field:'State', title:'状态',align: 'center',templet:'#status',width:166,}
        ,{field:'Image', title:'镜像',align: 'center'}
        ,{field:'Created', title:'创建时间',align: 'center',width:297,}
        ]]
        // ,page: true
    });
    
    //头工具栏事件
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
            case 'getState':
                // 启动
                var data = checkStatus.data;
                parent.parent.ajaxGet( parent.parent.defaultUrl+'/docker/start',{containerId:data[0].Id},function (res) {
                    if(res.code == 200){
                        layer.msg('服务启动成功！') 
                    }else{
                        layer.msg(res.message) 
                    }  
                    // 表格重载
                    reload()
                 })
            break;
            // case 'getpurse':
            //     // 暂停
            //     var data = checkStatus.data;
            //     parent.parent.ajaxGet( parent.parent.defaultUrl+'/docker/pause',{containerId:data[0].Id},function (res) {
            //         if(res.code == 200){
            //             layer.msg('服务已暂停！') 
            //         }else{
            //             layer.msg(res.message) 
            //         }
            //         // 表格重载
            //         reload()
            //      })
            // break;
            case 'isColse':
                // 关闭
                var data = checkStatus.data;
                parent.parent.ajaxGet( parent.parent.defaultUrl+'/docker/stop',{containerId:data[0].Id},function (res) {
                    if(res.code == 200){
                        layer.msg('服务已关闭！') 
                    }else{
                        layer.msg(res.message) 
                    }
                    // 表格重载
                    reload()
                 })
            break;
            case 'getrestart':
                // 重启
                var data = checkStatus.data;
                parent.parent.ajaxGet( parent.parent.defaultUrl+'/docker/restart',{containerId:data[0].Id},function (res) {
                    if(res.code == 200){
                        layer.msg('服务已重启！') 
                    }else{
                        layer.msg(res.message) 
                    }
                    // 表格重载
                    reload()
                 })
            break;
        };
    });

  
});

// 表格重载
function reload(){
    table.reload('test', {
        url: parent.parent.defaultUrl+'/docker/select'
      });
}

//时间戳转化为年月日时分秒
function timestampToTime(timestamp) {
    var date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
    var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
    var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());      
    strDate = Y+M+D+h+m+s;
    return strDate;           
}
</script>
</html>